<template>
  <div style="width: 100%;">
    <el-cascader :modelValue="modelValue" :props="innerProps" :options="options" @change="handleChange" filterable
                 :show-all-levels="showAllLevels" :disabled="disabled" :placeholder="placeholder" :clearable="clearable"
                 style="width:100%;" @blur="onBlur" @focus="onFocus" @close="handleClose"/>
  </div>
</template>

<script lang="ts" setup name="AreaOptions">
import { ref, reactive, toRaw, onMounted, watch, onBeforeUnmount } from 'vue'
import type { CascaderProps } from 'element-plus'
import { listAllArea } from "@/api/kitchen/area/area";
import {ExpandTrigger} from "element-plus/es/components/cascader-panel/src/node";

const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  // 是否支持清空选项
  clearable: {
    type: Boolean,
    default: true,
  },
  pId:{
    type: Number,
    default: 0,
  },
  isHasDis:{
    type: Number,
    default: 1,
  },
  // 指定某省，传入该自治区的areacode
  designation: {
    type: String,
    default: '',
  },
  // 仅显示最后一级
  showAllLevels: {
    type: Boolean,
    default: true,
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 输入框占位文本
  placeholder: {
    type: String,
    default: '',
  },
  // 是否选择任意一级选项，还是最后叶子结点
  checkStrictly: {
    type: Boolean,
    default: true,
  },
  // 次级菜单的展开方式,click和hover
  // expandTrigger: {
  //   type: ExpandTrigger,
  //   default: 'click',
  // },
  // 省市县乡镇，显示层级，默认为2，到区县。0为省，1为市，2为区县，3为乡镇
  level: {
    type: Number,
    default: 2,
  },
})

let options: any = ref([])  //树
const watchArr = ref([])

const queryParams:any = {
  id:props.pId,
  isHasDis: props.isHasDis
}

onMounted(() => {
  // 获取全量数据
  getAllData()
})

//因为prop中的值非动态响应，所以需要通过watch监听，immediate 初始化时接收父组件中的传值
watch(() => props.modelValue, () => {
  console.log('props.modelValue',props.modelValue);
  // queryParams.id = props.pId
}, {
  immediate: true
})


//因为prop中的值非动态响应，所以需要通过watch监听，immediate 初始化时接收父组件中的传值
watch(() => props.pId, () => {
  console.log('props.pId',props.pId);
  queryParams.id = props.pId
}, {
  immediate: true
})


//因为prop中的值非动态响应，所以需要通过watch监听，immediate 初始化时接收父组件中的传值
watch(() => props.isHasDis, () => {
  queryParams.isHasDis = props.isHasDis
  console.log('queryParams.isHasDis',queryParams.isHasDis);
}, {
  immediate: true
})

onBeforeUnmount(() => {})

const emit = defineEmits(['update:modelValue', 'change'])
const handleChange = (e: any, e2: any) => {
  watchArr.value = e
  emit('change', e)
  emit('update:modelValue', e)
}

async function getAllData() {
  console.log('queryParams',queryParams)
  let res = await listAllArea(queryParams)
  options.value = res.data
}

function onFocus(e: any) { }
async function onBeforeFilter(e: any) {
  let res = await listAllArea(queryParams)
  const fn = (arr: any[]) => {
    arr.forEach((item, index) => {
      if (item.children && item.children.length) {
        item.children = fn(item.children)
      } else {
        if (item.children) delete item.children
      }
    })
    return arr
  }
  console.log('res.data',res.data);
  options.value = fn(res.data)
}
// const isMultiple = ref(false)
const innerProps: CascaderProps = {
  checkStrictly: props.checkStrictly,
  // lazy: true,
  // value: 'areaCode',
  // label: 'name',
  // multiple: isMultiple.value, //modify
  expandTrigger: 'click' //props.expandTrigger,
}
const handleClose = () => { }
const onBlur = () => {
  // console.log('---onBlur');
}
// const onVisibleChange = (e: any) => {
//   // if (props.modelValue.length < props.multipleSelectNum && props.multiple == true) {
//   if (props.modelValue.length < props.multipleSelectNum && isMultiple.value == true) { //modify
//     function onRabbit(list: any) {
//       list.forEach((el: any) => {
//         if (el.children && el.children.length > 0) {
//           el.children = onRabbit(el.children);
//         }
//         el.disabled = false;
//         el.isFlag = false
//       });
//       return list;
//     }
//     const newList = onRabbit(options.value);
//     options.value = newList;
//   }
// }
// 监听
watch(
  () => watchArr.value,
  (newVal, oldVal) => {
    // if (props.multiple == true) {
    // if (isMultiple.value == true) {   //modify
    //   // console.log(oldVal,`watch监听变化前的数`)
    //   // console.log(newVal, `watch监听变化后的数据`)
    //   if (newVal.length >= props.multipleSelectNum) {
    //     function onRabbit(list: any) {
    //       list.forEach((el: any) => {
    //         if (el.children && el.children.length > 0) {
    //           el.children = onRabbit(el.children);
    //         }
    //         newVal.forEach((v: any) => {
    //           if (v[v.length - 1] != el.areaCode) {
    //             if (el.isFlag) {
    //             } else {
    //               el.disabled = true
    //               el.isFlag = true
    //             }
    //           } else {
    //             el.disabled = false
    //             el.isFlag = true
    //           }
    //         })
    //       });
    //       return list;
    //     }
    //     const newList = onRabbit(options.value);
    //     options.value = newList;
    //   } else {
    //     function onRabbit(list: any) {
    //       list.forEach((el: any) => {
    //         if (el.children && el.children.length > 0) {
    //           el.children = onRabbit(el.children);
    //         }
    //         el.disabled = false;
    //         el.isFlag = false
    //       });
    //       return list;
    //     }
    //     const newList = onRabbit(options.value);
    //     options.value = newList;
    //   }
    // }
  },
  {
    immediate: true, // 立即执行
    deep: true // 深度监听
  }
)
</script>

<style></style>
